<template>
  <div>
  <el-button type="primary" @click="addStaff">添加</el-button><br>
    <el-table
    :data="obj"
    stripe
    style="width: 100%">
    <el-table-column 
      prop="id"
      label="编号"
      width="150"
      align="center">
    </el-table-column>
    <el-table-column
      prop="username"
      label="姓名"
      width="150"
      align="center">
    </el-table-column>
    <el-table-column
      prop="telephone"
      label="手机号"
      width="170"
      align="center">
    </el-table-column>
    <el-table-column
      prop="idCard"
      label="身份证号"
      width="170"
      align="center">
    </el-table-column>
    <el-table-column
      prop="bankCard"
      label="银行卡号"
      align="center">
    </el-table-column>
    <el-table-column
      prop="registerTime"
      label="注册时间"
      align="center">
    </el-table-column>
    <el-table-column
      prop="status"
      label="状态"
      align="center">
    </el-table-column>
    <el-table-column
      label="操作"
      align="center">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
        <el-button type="text" size="small" @click="change(scope.row)">编辑</el-button>
        <el-button type="text" size="small" @click="details(scope.row)">详情</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 模态框 -->
  <el-dialog :title="title" :visible.sync="dialogFormVisible">
  <el-form :model="form" :rules="rules" ref='ruleForm'>
    <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
      <el-input v-model="form.username" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="姓名" :label-width="formLabelWidth" prop="realname">
      <el-input v-model="form.realname" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="手机号" :label-width="formLabelWidth" prop="telephone">
      <el-input v-model="form.telephone" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="身份证" :label-width="formLabelWidth" prop="idCard">
      <el-input v-model="form.idCard" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="银行卡号" :label-width="formLabelWidth" prop="bankCard">
      <el-input v-model="form.bankCard" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
      <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
  </div>
</el-dialog>


  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage1"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import DropdownMenu from '@/components/Share/DropdownMenu';
import qs from 'querystring';



export default {
  name: 'Documentation',
  components: { DropdownMenu },
  data() {
    return {
      obj:[],
      id:0,
      total:0,
      currentPage1:1,
      pageSize:6,
      title:"添加员工信息",
      dialogFormVisible: false,
      form: {
          username: '',
          realname: '',
          telephone: '',
          idCard:'',
          bankCard:"",
          password:"",
          type: "",
        },
        formLabelWidth: '120px',
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
          ],
          realname: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
          ],
          telephone: [
            { required: true, message: '手机号不能为空'},
            { min: 2, max: 15, message: '长度在 2 到 15 个字符'}
          ],
          idCard: [
            { required: true, message: '身份证不能为空'},
            { min: 2, max: 15, message: '长度在 2 到 15 个字符'}
          ],
          bankCard: [
            { required: true, message: '银行卡号不能为空'},
            { min: 2, max: 15, message: '长度在 2 到 15 个字符'}
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
          ],
        }
    }
  },
   
  

methods: {
      //添加确认点击
      submitForm(formName) {
        var self=this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            self.$axios.post("/waiter/saveOrUpdate",qs.stringify(self.form)).then(response=>{
              if(response.data.status==200){
                this.$message({
                    type: 'success',
                    message: '保存成功!'
                });
                self.findAll();
              }else{
                this.$message.error("删除失败");
              }
              self.dialogFormVisible=false;
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

      //详情按钮
      details(id){
        // console.log(id)
        this.$router.push({path:"/ygxq/index",query:{id:id}});
      },

      //编辑按钮
      change(row){
        this.dialogFormVisible=true;
        this.title="修改员工信息";
        this.form={
          id:row.id,
          username: row.username,
          realname: row.realname,
          telephone: row.telephone,
          idCard:row.idCard,
          bankCard:row.bankCard,
          password:row.password,
          type: "waiter",
        }
      },

      //添加点击出现模态框
      addStaff(){
        this.dialogFormVisible=true;
        this.title="添加员工信息";
        this.form={
          username: '',
          realname: '',
          telephone: '',
          idCard:'',
          bankCard:"",
          password:""
        }
      },
      //分页查询封装函数
      findAll(){
        var data={
          page:this.currentPage1-1,
          pageSize:this.pageSize
        }
        this.$axios.post("/waiter/query",qs.stringify(data)).then(response=>{
        this.obj=response.data.data.list;
        this.total=response.data.data.total
        // console.log(response.data.data)
    })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage1=val;
        this.findAll();
      },
      //删除函数
      handleClick(row){
          var id=row.id;
          var self=this;
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.$axios.get("/waiter/deleteById",{params:{id}}).then((response)=>{
              if(response.data.status==200){
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                  self.findAll();
              }else{
                  this.$message.error("删除失败");
              }
          })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
          
      },

    created(){
      this.findAll();
},

}
</script>

<style lang="scss" scoped>

</style>
